<template>
  <div class="play-page-course-module">
    <template v-if="list.length">
      <div
        class="course-list-item flex-center-wrap flex-justify-between"
        v-for="(item, index) in list"
        :key="index"
        @click="goProduct(item)"
      >
        <img
          class="course-list-item-l"
          :src="parseResourceUrl(item.cover_url)"
        />
        <div class="course-list-item-r flex-column-wrap flex-justify-between">
          <div class="product-name text-ess-2">{{ item.product_name }}</div>
          <div class="title text-ess-2">
            {{ item.recommend_description }}
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="no-data">
        <div class="flex-center flex-column-wrap">
          <img
            class="empty-img"
            src="//image.zlketang.com/public/news/images/new_official/play/empty.png"
            alt="空状态"
          />
          <div class="empty-text">很抱歉，暂无课程</div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'zlHomeCourse',
  data() {
    return {}
  },
  computed: {
    list() {
      let info = this.$store.state.play.playingSection
      let { recommend } = info
      if (Array.isArray(recommend)) {
        return recommend
      }
      return []
    }
  },

  methods: {
    goProduct(row) {
      let { product_id } = row
      if (!product_id) return this.$message.warning('缺少商品id~')
      let url = `/course_detail.html`
      this.goTo(url, {
        query: {
          product_id
        },
        target: '_blank'
      })
    }
  },
  mounted() {}
}
</script>

<style scoped>
.play-page-course-module {
  overflow-y: auto;
  height: calc(100% - 94px);
  background: #212121;
}
.course-list-item {
  padding: 10px 20px;
  cursor: pointer;
}
.course-list-item-l {
  width: 142px;
  height: 80px;
  border-radius: 4px;
}
.course-list-item-r {
  width: 118px;
  padding: 2px 0;
  align-self: stretch;
}
.product-name {
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  color: #e6e6e6;
  line-height: 18px;
}
.title {
  height: 28px;
  font-size: 10px;
  font-weight: 400;
  color: #737373;
  line-height: 14px;
}
.no-data {
  margin-top: 146px;
  color: #b3b3b3;
}
.empty-img {
  display: block;
  width: 122px;
  height: 79px;
}
.empty-text {
  margin-top: 10px;
  width: 154px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  font-family: 'PingFangSC-Regular, PingFang SC';
  font-weight: 400;
  color: #8c8c8c;
}
</style>
